const IMGS_PATH = ["./images/1.jpg", "./images/2.jpg", "./images/3.png"];

const ul = document.querySelector(".left-img-ul");
const leftImg = document.querySelector(".left-img");
const rightIMG = document.querySelector(".right");
const maskDom = document.querySelector(".mask");
var currShowImg = "";

function initData() {
  function setCurrClick(item) {
    currShowImg = item;
    leftImg.style.backgroundImage = `url(${item})`;
    rightIMG.style.backgroundImage = `url(${item})`;
  }
  IMGS_PATH.map((item) => {
    var li = document.createElement("li");
    li.style.backgroundImage = `url(${item})`;
    li.onclick = function () {
      setCurrClick(item);
    };

    ul.appendChild(li);
  });
  setCurrClick(IMGS_PATH[0]);
  // 也可以使用时间委托
  /**
   * function(e){
   *   if(e.target.tagName === 'LI'){
   *     var lis = document.querySelectorAll('li');
   *     for(var i=0; i< lis.length; i++){
   *       lis[i].style.border = 'none';
   *     }
   *   }
   *   e.target.style.border = '2px solid #000';
   *   var index = [].indexOf.call(lis, e.target);
   *   midImg.style.backgroundImage = 'url';
   * }
   */
}

function initEvent() {
  leftImg.onmousemove = function (e) {
    rightIMG.style.opacity = 1;
    maskDom.style.opacity = 1;
    var left = e.clientX - leftImg.offsetLeft - maskDom.offsetWidth / 2;
    var top = e.clientY - leftImg.offsetTop - maskDom.offsetHeight / 2;
    if (left <= 0) {
      left = 0;
    }
    if (top <= 0) {
      top = 0;
    }
    if (left >= leftImg.offsetWidth - maskDom.offsetWidth) {
      left = leftImg.offsetWidth - maskDom.offsetWidth;
    }
    if (top >= leftImg.offsetHeight - maskDom.offsetHeight) {
      top = leftImg.offsetHeight - maskDom.offsetHeight;
    }
    maskDom.style.left = left + "px";
    maskDom.style.top = top + "px";
    rightIMG.style.backgroundPositionX = `${-2.5 * left}px`;
    rightIMG.style.backgroundPositionY = `${-2.5 * top}px`;
  };
  leftImg.onmouseleave = function () {
    rightIMG.style.opacity = 0;
    maskDom.style.opacity = 0;
  };
}

function main() {
  initData();
  initEvent();
}
main();
